// 1. 获取文章分类数据并渲染到页面中
async function getCates() {
  const res = await reqGetCates()
  // 要解决一个bug问题.先清空再追加-------------------
  $('.layui-card tbody').empty()
  // console.log(res.data.data) // 数组列表
  //  遍历数据 动态创建tr行和td列并追加给tbody 
  res.data.data.forEach(item => {
    // 态创建tr行和td列
    let theTr = `<tr>
  <td>${item.name}</td>
  <td>${item.alias}</td>
  <td>
    <button myid="${item.Id}" myname="${item.name}" myalias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    <button myid="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
  </td>
</tr>`;
    // 追加给tbody
    $('.layui-card tbody').append(theTr)
  })
}
getCates()

// 2. 添加类别
//  2.1 点击添加按钮 展示一个对话框 对话框中有html结构
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;
$('.add').on('click', function () {
  // index 弹层的一个标志
  let index = layer.open({
    type: 1,  // 类型 1（页面层）
    content: add_str, //添加的表单结构
    area: ['500px', '300px'], // 弹出层的宽高的
    title: '新增类别',
    // 弹层展示后的一个回调函数
    success: function () {
      console.log('弹出展示了');
      // 提交添加功能
      $('.add-form').on('submit', async e => {
        e.preventDefault()
        // console.log($('input[name=name]').val());
        // console.log($('input[name=alias]').val());
        //  表单jq对象.serialize()  序列化表单数据 得到k=v&k=v
        // console.log($('.add-form').serialize())
        const res = await reqAddCate($('.add-form').serialize())
        console.log(res)
        // 添加完毕后 关闭弹出  layer.close(index); 
        layer.close(index)
        // 重新获取一遍数据 得到最新的数据
        getCates()
      })

    }
  });
})
// 删除操作 因为删除和编辑按钮是动态创建的所以使用事件代理
$('tbody').on('click', '.delete', function () {
  // console.log('删除');
  // 发送请求删除
  // console.log($(this));
  layer.confirm('确认删除吗？', { icon: 3, title: '提示' }, async () => {
    const res = await reqDeletCate($(this).attr('myid'))
    console.log(res)
    // 重绘页面 -- 性能问题
    // getCates()
    // 直接将当前删除的按钮所在的tr从结构中直接移除
    $(this).parents('tr').remove()
  })
})
// 小扩展  只是想删除这个数据并且更新视图 重新将tbody清空 重新获取数据遍历创建追加...刚才这种操作操作了大量的dom元素  dom操作效率是极低的  vue  react 不推荐操作dom

// 编辑工作 事件委托绑定事件
var edit_str = `
  <form class="layui-form edit-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden"  name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
$('tbody').on('click', '.edit', function () {
  let index = layer.open({
    type: 1,  // 类型 1（页面层）
    content: edit_str, //添加的表单结构
    area: ['500px', '300px'], // 弹出层的宽高的
    title: '编辑类别',
    // 弹层展示后的一个回调函数
    success: () => {
      // 使用原始的方式来实现回显
      // $('input[name=name]').val($(this).attr('myname'))
      // $('input[name=alias]').val($(this).attr('myalias'))
      // $('input[name=Id]').val($(this).attr('myid'))
      //  layui中有form.val('表单lay-filter的值', 数据) -- 设置
      //  layui中有form.val('表单lay-filter的值')  --取值
      form.val('edit', {
        name: $(this).attr('myname'),
        alias: $(this).attr('myalias'),
        Id: $(this).attr('myid')
      })
      // 编辑提交  发送请求 关闭弹出层  重绘页面
      $('.edit-form').on('submit', async (e) => {
        e.preventDefault()
        // console.log($('.edit-form').serialize()); 处理好的数据格式k=v&k=v
        const res = await reqEditCate($('.edit-form').serialize())
        // console.log(res)
        // 关闭弹出层
        layer.close(index)
        // 重绘页面 --- 可优化的一个点 单独更新某个节点
        getCates()
      })
    }
  });
})

